<template>
	<view class="page-major">
		<view class="condition">
			<view class="conmenus">
				<view class="conleft">{{$t('defect.defInfo.oldMajor')}}</view>
				<view class="conright">
					{{ skillName }}
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('defect.defInfo.teamName')}}</view>
				<view class="conright fieldSplice right">
					<view>{{ mtnPerson }}</view> 
					<view>/</view>
					<view>{{ mtnTeamName }}</view> 
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('defect.defInfo.toMajor')}}<span class="redx">*</span></view>
				<view class="conright">
					<data-picker v-model="toSkillNo" :range="skillOptions"></data-picker>
				</view>
			</view>
			<view class="conmenus">
				<view class="conleft">{{$t('defect.defInfo.toTeamNo')}}<span class="redx">*</span></view>
				<view class="conright">
					<data-picker v-model="toTeamNo" :range="teamOptions"></data-picker>
				</view>
			</view>
			<view class="contexts">
				<view class="conleft">{{$t('defect.defInfo.turnTTConesc')}}<span class="redx">*</span></view>
				<view class="contopright">
					<textarea :placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" auto-height v-model="situation"/>
				</view>
			</view>
		</view> 
		
		<view class="button-popup">
			<button type="primary" @click="submit">{{$t('baseCommon.buttons.submit')}}</button>
			<button type="default" @click="reset">{{$t('baseCommon.buttons.reset')}}</button>
		</view>
	</view>
</template>

<script>
	import { notice, utilities } from '@/utils/common.js'
	import { findByTypeKey } from '@/api/platform/common.js'
	
	export default {
		props: {
			data: {
				type: Object,
				default() {
					return {}
				}
			},
			skillNo: {
				type: String,
				default() {
					return ""
				}
			},
			mtnPerson: {
				type: String,
				default() {
					return ""
				}
			},
			mtnTeamName: {
				type: String,
				default() {
					return ""
				}
			},
			operationTeamNo: {
				type: String,
				default() {
					return ""
				}
			}
		},
		data() {
			return {
				skillName: '',
				skillOptions: [],
				teamOptions: [],
				formData: this.data,
				toSkillNo: '',
				toSkillName: '',
				toTeamNo: '',
				toTeamName: '',
				situation: ''
			}
		},
		created() {
			this.init()
		},
		methods: {
			async init() {
				this.skillOptions = []
				await findByTypeKey({ typeKey: 'zybm' }).then(res=>{
					if(res.data) {
						res.data.forEach(item=>{
							this.skillOptions.push({
								value: item.key,
								label: item.name
							})
						})
						
						this.skillName = this.skillOptions.find(r => r.value == this.skillNo).label
					}
				})
				
				this.teamOptions = []
				uni.getStorageSync("teamList").forEach(item=>{
					this.teamOptions.push({
						value: item.id,
						label: item.name
					})
				})
			},
			submit() {
				if(!this.toSkillName){
					notice.toast(this.$t('baseCommon.message.pleaseSelect', { title: this.$t('defect.defInfo.toMajor') }))
					return
				}
				if(!this.toTeamName){
					notice.toast(this.$t('baseCommon.message.pleaseSelect', { title: this.$t('defect.defInfo.toTeamNo') }))
					return
				}
				if(!this.situation){
					notice.toast(this.$t('baseCommon.message.pleaseEnter', { title: this.$t('defect.defInfo.turnTTConesc') }))
					return
				}
				if(!this.operationTeamNo){
					this.operationTeamNo = ""
				}
				
				this.formData.changeTime = utilities.getNowDateTime()
				this.formData.changeDesp = this.situation
				this.formData.toLevel = this.toSkillNo
				this.formData.toTeamNo = this.toTeamNo
				this.formData.toTeamName = this.toTeamName
				this.formData.changeType = "nbbg"
				this.$emit("getRecord", this.formData)
				this.$emit("close", "major")
			},
			reset() {
				this.toSkillNo = ""
				this.toSkillName = ""
				this.toTeamNo = ""
				this.toTeamName = ""
				this.situation = ""
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/style/common-detail.scss';
	
	.page-major {
		overflow-y: auto;
		background-color: #fff;
		width: 350px;
	}
	
	.fieldSplice {
		display: flex;
		align-items: center;
		
		.separator {
			margin: 0 5px;
		}
		
		.fieldView {
			line-height: 35px;
		}
	}
	
	.right {
		justify-content: flex-end;
	}
</style>
